<script setup lang="ts">
import { ref } from 'vue'
import { get } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
const memberCardOrderLists = ref([])
const noEmpty = ref(false)
const loading = ref(false)
const finished = ref(false)
const arrowDirection = ref("down")
const page = ref(1)
const limit = 10
function onClickLeft() {
  window.history.back()
}
function onLoad() {
  queryData()
}
function queryData() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/memberCardOrderWechatNew/queryMyMemberCardWechat', {
    limit: limit,
    page: page.value
  })
    .then((res) => {
      if (res.code === 0) {
        // 正常返回数据
        loading.value = false
        noEmpty.value = false
        res.data.forEach((item) => {
          memberCardOrderLists.value.push({
            ...item,
          })
        })
        if (page.value == res.totalPage) {
          loading.value = true
          finished.value = true
          noEmpty.value = false
        } else {
          page.value++
        }
      } else {
        //其他返回数据情况
        if (res.count > 0) {
          //有数据情况
          if (res.code == 201) {
            loading.value = true
            finished.value = true
            noEmpty.value = false
          }
        } else {
          //无数据情况
          loading.value = true
          finished.value = true
          noEmpty.value = true
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
//显示套餐历史使用记录
function openViewUsed(dbid:number){
  const index = memberCardOrderLists.value.findIndex(item => item.dbid === dbid);
  if (index !== -1) {
    const showUsed=memberCardOrderLists.value[index].showUsed||false;
    if(showUsed==false){
      memberCardOrderLists.value[index].showUsed=true;
      arrowDirection.value="up";
    }else{
      memberCardOrderLists.value[index].showUsed=false;
      arrowDirection.value="down";
      }
  }
}
</script>
<template>
  <van-nav-bar title="我的套餐" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-empty
    v-if="noEmpty == true"
    :image="VUE_APP_BASE_API+'/images/vue/noData.png'"
    image-size="100"
    description="暂无数据"
  />
  <div class="memberCarEmptyContent" v-if="noEmpty == true"><!--无套餐 -->
    <p class="friendTip">请到店购买或在瑞一荟积分商城购买</p>
    <p class="friendTip">售后电话：028-87263999</p>
    <div class="minaImageContent">
        <div style="text-align: center">
          <img style="width: 250px;" :src="VUE_APP_BASE_API+'/images/vue/ryMemberCard.png'"></img>
        </div>
        <div style="margin-top: 12px;">
          <p style="color: var(--sub-two-color);">长按识别瑞一荟积分商城</p>
        </div>
      </div>
  </div><!--无套餐-->
  <van-list
    v-else
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="memberCarContent"
      v-for="memberCardOrder in memberCardOrderLists"
      :key="memberCardOrder.dbid"
    >
      <div class="memberCardHeader">
        <div class="memberCardTitle">{{ memberCardOrder.memberCardName }}</div>
        <div class="rightText">
          <div class="button useButton" v-if="memberCardOrder.state==1">{{memberCardOrder.stateName}}</div>
          <div class="button usedButton" v-if="memberCardOrder.state==3">{{memberCardOrder.stateName}}</div>
          <div class="button overTimeButton" v-if="memberCardOrder.state!=3&&memberCardOrder.state!=1">{{memberCardOrder.stateName}}</div>
        </div>
      </div>
      <van-cell-group>
        <van-cell title="套餐号" :value="memberCardOrder.memberCardNo" />
        <van-cell title="车牌号" :value="memberCardOrder.carPlateNo" />
        <van-cell
          title="订单时间"
          :value="memberCardOrder.orderDate.replace(' 00:00:00','') "
        />
        <van-cell title="销售价" :value="memberCardOrder.price" style="--van-cell-value-font-size: 16px; --van-cell-value-color: var(--main-color);"/>
        <van-cell title="总金额/次数" :value="memberCardOrder.totalAvailablePrice" style="--van-cell-value-font-size: 16px; --van-cell-value-color: var(--main-color);"/>
        <van-cell title="使用次数" :value="memberCardOrder.usedTotalPrice" style="--van-cell-value-font-size: 16px; --van-cell-value-color: var(--main-color);"/>
        <van-cell title="剩余次数" :value="memberCardOrder.balanceTotalPrice" style="--van-cell-value-font-size: 16px; --van-cell-value-color: var(--main-color);"/>
        <van-cell title="有效期" :value="memberCardOrder.inDateStr" value-class="valueWidth" />
        <van-cell v-if="memberCardOrder.usedTotalPrice>0" @click="openViewUsed(memberCardOrder.dbid)" title="使用记录" :icon="VUE_APP_BASE_API+'/images/vue/more.png'"  is-link :arrow-direction="arrowDirection"/>
          <div  :class="'memberCardUsedContent'+ (memberCardOrder.showUsed==true?'  animate-fade':'')" v-if="memberCardOrder.showUsed==true">
            <div class="memberCardUsedItem" v-for="repairOrderCouperMemberCard in memberCardOrder.repairOrderCouperMemberCards">
              <van-cell-group>
                <van-cell title="使用时间" :value="repairOrderCouperMemberCard.cashDateTime" />
                <van-cell title="接车单号" :value="repairOrderCouperMemberCard.receptionNo" />
                <van-cell title="服务顾问" :value="repairOrderCouperMemberCard.serviceName"  />
              </van-cell-group>
            </div>
          </div>
      </van-cell-group>
    </div>
    <br />
  </van-list>
</template>
<style>
  .van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after {
     border-width:0ch;
}
.valueWidth{
  width: 250px;
}
</style>
